<template>
	<view class="medal-container">
		<topBar :back="true"></topBar>
		<!-- 背景图片 -->
		<image src="/static/xunzhangbeijing.png" class="background-image" mode="aspectFill"></image>
		<scroll-view class="scrollable-content" scroll-y>
			<!-- 主要勋章展示 -->
			<view class="main-medal-section" v-if="user.level > 0">
				<view class="main-medal flex ai-c jc-c">
					<image :src="BASE_URL + user.levelimg" style="width: 320rpx;height: 320rpx;" class="medal-image"
						mode="aspectFit"></image>
				</view>
				<view class="medal-title">
					<text class="title-prefix">我是</text>
					<text class="title-main">{{user.levelname}}</text>
				</view>
			</view>

			<!-- 全部等级标题 -->
			<view class="all-ranks-section flex ai-c jc-c">
				<image src="/static/zuoxianxan.png" style="width: 38%;height: 8rpx"
					mode="aspectFit"></image>
				<text class="section-title">全部等级</text>
				<image src="/static/youxianxain.png" style="width: 38%;height: 8rpx"
					mode="aspectFit"></image>
			</view>

			<!-- 第一行 - 顶级勋章 -->
			<view class="medal-row top-tier">
				<view class="medal-item" v-for="(item, index) in one" :key="index">
					<image v-if="item.is_get==0" :src="BASE_URL + item.image" style="width: 200rpx;height: 200rpx;"
						class="medal-icon" mode="aspectFit"></image>
					<image v-if="item.is_get==1" :src="BASE_URL + item.light_image"
						style="width: 200rpx;height: 200rpx;" class="medal-icon" mode="aspectFit"></image>


					<text class="medal-name"
						:style="{ color: item.is_get==1 ? '#7e7e7e' : '#999999' }">{{item.name}}</text>
					<text class="medal-stats">胜{{item.num}}场+大师{{item.play_id}}场</text>
				</view>
				<!-- <view class="medal-item">
					<image src="/static/xyingysd.png" style="width: 200rpx;height: 200rpx;" class="medal-icon"
						mode="aspectFit"></image>
					<text class="medal-name">一代宗师</text>
					<text class="medal-stats">胜88场+大师10场</text>
				</view>
				<view class="medal-item">
					<image src="/static/xuejietaidou.png" style="width: 200rpx;height: 200rpx;" class="medal-icon"
						mode="aspectFit"></image>
					<text class="medal-name">学界泰斗</text>
					<text class="medal-stats">胜58场+大师5场</text>
				</view> -->
			</view>

			<!-- 第二行 - 中级勋章 -->
			<view class="medal-row middle-tier">
				<view class="medal-item" v-for="(item, index) in two" :key="index">
					<image v-if="item.is_get==0" :src="BASE_URL + item.image" style="width: 104rpx;height: 104rpx;"
						class="medal-icon" mode="aspectFit"></image>
					<image v-if="item.is_get==1" :src="BASE_URL + item.light_image"
						style="width: 104rpx;height: 104rpx;" class="medal-icon" mode="aspectFit"></image>


					<text class="medal-name"
						:style="{ color: item.is_get==1 ? '#7e7e7e' : '#999999' }">{{item.name}}</text>
					<text class="medal-stats">胜{{item.num}}场+专家{{item.play_id}}场</text>
				</view>
				<!-- <view class="medal-item">
					<image src="/static/hongnuwenhua.png" class="medal-icon" mode="aspectFit"></image>
					<text class="medal-name">鸿儒大家</text>
					<text class="medal-stats">胜38场+专家5场</text>
				</view>
				<view class="medal-item">
					<image src="/static/xuexilingxiu.png" style="width: 120rpx;height: 120rpx;" class="medal-icon"
						mode="aspectFit"></image>
					<text class="medal-name">学习领袖</text>
					<text class="medal-stats">胜30场+高级5场</text>
				</view>
				<view class="medal-item">
					<image src="/static/xuezhexiao.png" class="medal-icon" mode="aspectFit"></image>
					<text class="medal-name">学者</text>
					<text class="medal-stats">胜25场+中级5场</text>
				</view> -->
			</view>

			<!-- 第三行 - 初级勋章 -->
			<view class="medal-row bottom-tier" style="gap: 28rpx;">
				<view class="medal-item" v-for="(item, index) in three" :key="index">
					<image v-if="item.is_get==0" :src="BASE_URL + item.image" style="width: 104rpx;height: 104rpx;"
						class="medal-icon" mode="aspectFit"></image>
					<image v-if="item.is_get==1" :src="BASE_URL + item.light_image"
						style="width: 104rpx;height: 104rpx;" class="medal-icon" mode="aspectFit"></image>
					<text class="medal-name"
						:style="{ color: item.is_get==1 ? '#7e7e7e' : '#999999' }">{{item.name}}</text>
					<text class="medal-stats">胜{{item.num}}场</text>
				</view>
				<!-- <view class="medal-item">
					<image src="/static/kaichuangxiao.png" class="medal-icon" mode="aspectFit"></image>
					<text class="medal-name">开创者</text>
					<text class="medal-stats">胜12场</text>
				</view>
				<view class="medal-item">
					<image src="/static/tansuoqianxu.png" class="medal-icon" mode="aspectFit"></image>
					<text class="medal-name">探索先驱</text>
					<text class="medal-stats">胜8场</text>
				</view>
				<view class="medal-item">
					<image src="/static/zhihuinengshou.png" class="medal-icon" mode="aspectFit"></image>
					<text class="medal-name">智慧能手</text>
					<text class="medal-stats">胜5场</text>
				</view>
				<view class="medal-item">
					<image src="/static/xiaoxingxingwuyanliuse.png" class="medal-icon" mode="aspectFit"></image>
					<text class="medal-name">学习新星</text>
					<text class="medal-stats">胜3场</text>
				</view> -->
			</view>

		</scroll-view>


	</view>
</template>

<script setup>
import api from '@/api'
import topBar from '@/components/topBar.vue'
import { onLoad } from '@dcloudio/uni-app'
import { useUserStore } from '@/store/index.js'
import { ref } from 'vue'
import { BASE_URL } from '@/utils/request.js'
const userStore = useUserStore()

const one = ref([])
const two = ref([])
const three = ref([])
const user = ref([])
onLoad(() => {
	user.value = userStore.userInfo
	console.log('3333'+userStore.userInfo)
	api.getUserInfo({ user_id: userStore.userInfo?.id }).then(res => {
	 // console.log('2222', res)
	 
	})
	api.getLevelList({ user_id: userStore.userInfo?.id }).then(res => {
	  three.value = res.data
	})
	api.getLevelList2({ user_id: userStore.userInfo?.id }).then(res => {
	 // console.log(res)
	  two.value = res.data
	})
	api.getLevelList3({ user_id: userStore.userInfo?.id }).then(res => {
	//  console.log(res)
	  one.value = res.data
	})

})
</script>

<style scoped>
.medal-container {
	height: 100vh;
	padding: 0;
	position: relative;
	display: flex;
	flex-direction: column;
}

/* 状态栏样式 */
.status-bar {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 20rpx 30rpx 10rpx;
	height: 60rpx;
}

.time {
	font-size: 32rpx;
	font-weight: 500;
	color: #000;
}

.status-right {
	display: flex;
	align-items: center;
	gap: 10rpx;
}

.signal,
.wifi,
.battery {
	width: 20rpx;
	height: 20rpx;
	background: #000;
	border-radius: 50%;
}

/* 导航栏样式 */
.nav-bar {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 20rpx 30rpx;
}

.back-arrow {
	font-size: 40rpx;
	color: #000;
	font-weight: bold;
}

.nav-right {
	display: flex;
	gap: 20rpx;
}

.nav-icon {
	width: 30rpx;
	height: 30rpx;
	background: #000;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	color: white;
	font-size: 20rpx;
}

/* 主要勋章展示 */
.main-medal-section {
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 60rpx 0;
}

.main-medal {
	width: 320rpx;
	height: 320rpx;
	margin-bottom: 30rpx;
}

.medal-image {
	width: 100%;
	height: 100%;
}

.medal-title {
	text-align: center;
}

.title-prefix {
	display: block;
	font-size: 24rpx;
	color: #666;
	margin-bottom: 14rpx;
}

.title-main {
	display: block;
	font-size: 40rpx;
	font-weight: bold;
	color: #000;
}

/* 全部等级标题 */
.all-ranks-section {
	position: relative;
	text-align: center;
	margin: 0rpx 0 50rpx;
	padding: 0 30rpx;
}

.section-line {
	height: 2rpx;
	margin-bottom: 20rpx;
}

.section-title {
	font-size: 24rpx;
	font-weight: 500;
	color: #7e7e7e;
	padding: 0 30rpx;
	position: relative;
	z-index: 1;
}

/* 勋章行样式 */
.medal-row {
	display: flex;
	justify-content: center;
	gap: 20rpx;
	margin-bottom: 40rpx;
	padding: 0 30rpx;
}

.top-tier {
	gap: 30rpx;
}

.middle-tier {
	gap: 25rpx;
}

.bottom-tier {
	gap: 20rpx;
	flex-wrap: wrap;
}

/* 勋章项目样式 */
.medal-item {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
}

.medal-icon {
	width: 120rpx;
	height: 120rpx;
	margin-bottom: 15rpx;
}

.medal-name {
	font-size: 28rpx;
	font-weight: 500;
	color: #999999;
	margin-bottom: 4rpx;
}

.medal-stats {
	font-size: 20rpx;
	color: #999999;
}

/* 背景图片优化 */
.medal-container::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: url('/static/xunzhangbeijing.png') no-repeat center center;
	background-size: cover;
	z-index: -1;
}

/* 背景图片样式 */
.background-image {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: -1;
}

/* 确保内容在背景之上 */
.main-medal-section,
.all-ranks-section,
.medal-row {
	position: relative;
	z-index: 1;
}
</style>
